uniapp拍照上传照片流程笔记 您所在的位置:网站首页 uniapp 拍照 上传图片 前后端php 开源 uniapp拍照上传照片流程笔记

uniapp拍照上传照片流程笔记

2023-07-24 02:06| 来源: 网络整理| 查看: 265

uniapp拍照上传页面:

1.进入页面的时候就开始检查,是否已经上传过信息? (1)获取用户的信息 (2)判断是否登入过了? 未登入的话 跳转到登入页 (3)(一).获取用户信息里的标识值 ( 二).判断标识值 为1 是已经提交过了 跳转到提交页 , 为0 是未提交过 显示填写信息的页面, 为空的话 发起请求 获取用户信息里的标识值(需强转parseInt)并赋值给app.vue里的user的isApply(标识值) (三) 赋值完后,再次进行判断,为 1 的话跳转到提交页 为0的话显示填写信息的页面

2.跳转到提交页的方法(提前写好) 隐藏照相的方法(提前写好) 拒绝使用摄像头的方法(提前写好) camera中@error绑定的方法

3.点击照相,需要先获取用户的权限,照相的权限 (1).用wx.getSetting({})获取用户当前的设置 用来获取用户的照相的权限 (2).用户如果同意权限 那么res.authSetting[‘scope.camera’] 的值应该是true (3) 所以要判断用户是否给予了权限 判断res.authSetting[‘scope.camera’]是否为真 为真的情况下,显示照相的内容 (4)为假的情况下,说明用户没有给与权限,需要重新唤醒给与权限的窗口,重新赋予权限 4.重新获取用户的权限,就需要用到wx.openSetting({}),让用户重新的赋予权限,才能正常的使用功能,在success的方法中再次判断,res.authSetting[‘scope.camera’]的值是否为true,为true的话 在显示照相的内容 5.点击确定的方法中 将照片上传 拍摄照片:(1).需要创建camera组件 var camera = uni.createCameraContext(); (创建并返回 camera 组件的上下文 cameraContext 对象。) (2).用创建的camera去调用takePhoto对象 camera.takePhoto({}) (3)(一).在success的函数中判断是否有临时路径,有的话进入判断 没有的话 调佣关闭照相的方法 (二).在有临时路径的情况下,将临时路径赋值给data中的值 (三).赋值完后,就进行照片的上传 照片的上传:1.根据项目的api,上传相关的图片临时路径,在catth中若有错误就提示错误的内容

4.提交用户信息:(一).判断信息是否都有填写,若有空值,就要提醒用户填写信息 (二).根据项目中的api,提交相关的信息,在then中给app.vue中的user这是标识值为1 (三).在catth中若有错误就提示错误信息

从相册中选区照片:1.需要用到uni.chooseImage({})这个api,其中count这个值是限制选择照片的张数,最多9张 2.在success的函数中进行判断tempFilePaths的值是否存在和tempFilePaths[0]是否有值,有的话进入判断 3.将获取到的临时图片的路径保存到data中,在去调用上传图片的api



【本文地址】

公司简介

联系我们

今日新闻

    推荐新闻

    专题文章
      CopyRight 2018-2019 实验室设备网 版权所有